import styles from './styles.less';
import {Table, Space, Tag, Modal} from 'antd';
import {useCallback, useEffect, useState} from 'react';
import {ExclamationCircleFilled} from '@ant-design/icons';
import {nowrapColumns} from '@/utils/utils';
import Opera from './Opera';

import {connect, useAccess} from 'umi';

const DataTable = (props) => {
  const access = useAccess();
  const {dispatch, list, loading, submitting} = props;
  const {items, setDataForm, tablePayload, setTablePayload, pkgTablePayload, setPkgTablePayload} = props.data;
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  /* 获取列表 */
  const fetchList = useCallback((payload) => {
    if (!payload.pkgId) {
      dispatch({
        type: 'PMallPkgItems/chgDataTable',
        payload: {total: 0, list: []}
      });
    } else {
      dispatch({
        type: 'PMallPkgItems/fetchList',
        payload: payload,
      });
    }
  }, [dispatch]);

  /* 查询监听 */
  useEffect(() => {
    fetchList({...tablePayload, pkgId: items ? items.data.id : 0});
  }, [fetchList, tablePayload, items]);

  /* 编辑 */
  function edit(e, record) {
    e.preventDefault();
    setDataForm({
      visible: true,
      title: '编辑操作',
      data: record,
    });
    return false;
  }

  /* 删除 */
  function del(e, record) {
    e.preventDefault();
    if (!submitting) {
      Modal.confirm({
        title: '提示',
        icon: <ExclamationCircleFilled/>,
        content: '是否确定删除数据？',
        onOk() {
          dispatch({
            type: 'PMallPkgItems/del',
            payload: [record.id],
            callback: () => {
              setTablePayload({...tablePayload});
              setPkgTablePayload({...pkgTablePayload});
              setSelectedRowKeys([]);
            },
          });
        },
      });
    }
    return false;
  }

  const columns = [
    {
      title: '序号',
      width: 70,
      align: 'center',
      render: ({}, {}, index) => (
        <span>
          {index + 1}
        </span>
      ),
    },
    {
      title: '项目类型',
      dataIndex: 'itemType',
      align: 'center',
      render: (_, record) => {
        return (
          <span>{record.itemType === 1 ? '服务' : '商品'}</span>
        );
      },
    },
    {
      title: '商品/服务',
      dataIndex: 'name',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '规格/次卡',
      dataIndex: 'tag',
      align: 'center'
    },
    {
      title: '当前售价',
      dataIndex: 'sellPrice',
      align: 'center',
      render: (_, record) => {
        return (
          <span style={{color: '#d4380d'}}>{record.sellPrice}</span>
        );
      },
    },
    {
      title: '现有库存',
      dataIndex: 'stock',
      align: 'center',
      render: (_, record) => {
        return (
          <span style={{color: 'green'}}>{record.stock}</span>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      align: 'center',
      ellipsis: true,
      width: 100,
      render: (_, record) => {
        return (
          <Space size='small'>
            {(access?.mall_pkgItem_edit) && (
              <a onClick={e => edit(e, record)}>编辑</a>
            )}
            {(access?.mall_pkgItem_del) && (
              <a onClick={e => del(e, record)}>删除</a>
            )}
          </Space>
        );
      },
    },
  ];

  return (
    <>
      <div className={styles.myDataTable}>
        <Opera data={{
          setDataForm,
          selectedRowKeys,
          setSelectedRowKeys,
          tablePayload,
          setTablePayload,
          pkgTablePayload,
          setPkgTablePayload
        }}/>
        <Table
          rowSelection={{
            selectedRowKeys,
            onChange: (newSelectedRowKeys) => setSelectedRowKeys(newSelectedRowKeys),
          }}
          className={styles.myTable} bordered={false} size={'middle'} columns={nowrapColumns(columns, list)}
          dataSource={list} rowKey={'id'}
          pagination={false} scroll={{y: '100%'}} loading={loading}
        />
      </div>
    </>

  );
};

export default connect(({loading, PMallPkgItems}) => {
  return {
    loading: loading.effects['PMallPkgItems/fetchList'],
    submitting: loading.effects['PMallPkgItems/del'],
    list: PMallPkgItems.list,
  };
})(DataTable);
